<fieldset class="form-horizontal">
	<div id="textoAgregarRespuesta">
		<p   style="font-size: 15px; text-align:left;" >Selecciona un tema, un nivel y elige la pregunta para la que se quiere introducir las repuestas. <br>
			Introduce el número de respuestas deseadas y pinchar en guardar.
		</p>
	</div>
	<br/>
	<div id="seleccion" >
			<div style="text-align:left">
			<div id="asignatura" class="form-group">
				<label  for="asignaturas" class="col-xs-3 col-sm-2 control-label">Tema:</label> 
				<div class="col-xs-10 col-sm-5">
					<select id="asignaturas" name="idAsignatura" class="form-control " required>
						<option value="">-- Tema --</option>
					</select>
				</div>
			</div>
			<div id="nivel" class="form-group">
				<label  for="dificultades" class="col-xs-3 col-sm-2 control-label">Nivel:</label>
				<div class="col-xs-10 col-sm-5">
					<select id="dificultades" name="idDificultad" class="form-control" required>
						<option value="">-- Nivel --</option>
					</select>
				</div>
			</div>
			</div>
			<input type="button" value="Buscar Preguntas"
					id="buscarPreguntas" class="btn btn-primary"/>
				
		<br/>
		<br/>
		
		<table id="contenedorPreguntas" class="table table-bordered table-striped table-hover table-responsive">
			<thead>
					<th>Enunciado</th>
			</thead>
		</table>
	</div>

</fieldset>
<form id="incluir_respuesta">
	<br />

	<fieldset>
		<div>
			<input type="button" value="Agregar Respuesta" id="agregarRespuesta" class="btn btn-primary"/>

			<table id="contenedor">

			</table>

		</div>
		<br />
		<div>
			<input type="submit" value="Guardar" class="btn btn-primary"> 
			<input type="reset" value="Cancelar" class="btn btn-primary"/>
		</div>
	</fieldset>
</form>

<script>
var idPreguntaSeleccionada;
var index;

// El one sirve para llamarlo solo una vez
$(document).one("ajaxComplete", seleccion);
function seleccion() {

	// Cargar asignatura
	var $asignaturas = $('#asignaturas');
	var urlAsignatura = "../dispatcher/referencias/asignaturas";

	$.getJSON(urlAsignatura, function(datos) {
		$.each(datos, function(i, item) {
			$asignaturas.append('<option value="'+ item.id +'">'
					+ item.nombre + '</option>');
			$asignaturas.append(item.nombre);
		});

	});

	// Cargar dificultades
	var $dificultades = $('#dificultades');
	var urlDificultad = "../dispatcher/referencias/dificultad";

	$.getJSON(urlDificultad, function(data) {
		$.each(data, function(i, item) {
			$dificultades.append('<option value="'+ item.id +'">'
					+ item.label + '</option>')
			$dificultades.append(item.label);
		});

	});

};

$("#buscarPreguntas").click(function() {
	$("#contenedorPreguntas  > tbody > tr").remove();
	var asignatura = $('#asignaturas').val();
	var dificultad = $('#dificultades').val();
	var urlPreguntas = "../dispatcher/pregunta/recuperarPreguntas";
	urlPreguntas += "?asignaturaId="+ asignatura + "&dificultadId=" + dificultad;
	$.getJSON(urlPreguntas, function(data) {
		$.each(data, function(i, item){
			 $(contenedorPreguntas).append('<tr id='+ item.id +'> <td>' + item.enunciado + ' </td></tr>');
		});		
		$( "#contenedorPreguntas > tbody" ).selectable({
			filter:"tr"
		});
		$("#contenedorPreguntas").on("selectableselecting", function( event, ui ) {
			
			if (idPreguntaSeleccionada != null) {
				$("#"+idPreguntaSeleccionada).removeClass("ui-selected");
			}
			idPreguntaSeleccionada = ui.selecting.id;
		});
	});
	
});

$(function() {
	
});

// TODO reunir los dos partes formulario y el otro al principio...
$(document).one("ajaxComplete", formulario);
function formulario() {

	var MaxInputs = 8; //Número Maximo de Campos
	var contenedor = $("#contenedor"); //ID del contenedor

	//var x = número de campos existentes en el contenedor
	var x = $("#contenedor div").length + 1;
	var FieldCount = x - 1; //para el seguimiento de los campos

	$("#agregarRespuesta").click(
		function() {
			if (x <= MaxInputs) {//max input box allowed
				FieldCount++;
				//agregar campo
				$(contenedor).append(
					' <tr>'
					+ '<td><input type="text" name="contenido_respuesta"  placeholder="Respuesta" /></td>'
					+ '<td> Verdadera: <input type="checkbox" name="correcta" /> </td>'
					+ '<td><a href="#">&times;</a></td>'
					+ '</tr>');
				x++; //text box increment
			}
		return false;
	});
}

$('form').submit(function(event) {

	event.preventDefault();
	
	var data = [];


	$(contenedor).find('tr').each(function() {
		var id = $(this).attr('id');
		var row = {};
		$(this).find('input,select,textarea').each(function() {
			if ($(this).attr('name') == "correcta") {
	    		row[$(this).attr('name')] = this.checked;
	    	} else {
	    		row[$(this).attr('name')] = $(this).val();
	    	}
			row["idpregunta"] = idPreguntaSeleccionada;
		});
		
		data.push(row);
	}); 
	
	$.ajax({
		type : "POST",
		url : "../dispatcher/respuesta/incluirRespuesta",
		data : JSON.stringify(data),
		beforeSend : function(xhr) {
			xhr.setRequestHeader("Accept", "application/json");
			xhr.setRequestHeader("Content-Type", "application/json");
		},
		success: function (datos) {
                  alert("Respuestas agregadas");
          },
          error : function (data, status, er) {
          	alert("error" + data + " status " +status+" er:"+er );
          }
	});
});
</script>